<template>
  <div class="home-view-container">
    <h1>Adopt a new best friend.</h1>
    <h5>Total no. of Animals ready for Adoption:{{ animalsCount }}</h5>
    <h3>
      <font-awesome-icon icon="cat" />
      {{ getAllCats.length }} +
      <font-awesome-icon icon="dog" />
      {{ getAllDogs.length }}
    </h3>
    <button @click="togglePetForm" class="btn btn-primary">Add New Pet</button>
    <b-form @submit.prevent="handleSubmit" v-if="showPetForm">
      <b-form-group
        id="exampleInputGroup2"
        label="Pet's Name:"
        label-for="exampleInput2"
      >
        <b-form-input
          id="exampleInput2"
          type="text"
          v-model="formData.name"
          required
          placeholder="Enter name"
        />
      </b-form-group>

      <b-form-group
        id="exampleInputGroup3"
        label="Species:"
        label-for="exampleInput3"
      >
        <b-form-select
          id="exampleInput3"
          :options="['cats', 'dogs']"
          required
          v-model="formData.species"
        />
      </b-form-group>

      <b-form-group
        id="exampleInputGroup2"
        label="Pet's Age:"
        label-for="exampleInput2"
      >
        <b-form-input
          id="exampleInput2"
          type="number"
          v-model="formData.age"
          required
          placeholder="Enter age"
        />
      </b-form-group>

      <b-button type="submit" variant="primary">Submit</b-button>
      <b-button type="reset" variant="danger">Reset</b-button>
    </b-form>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapActions, mapGetters } from 'vuex'
export default {
  name: 'Home',
  data () {
    return {
      showPetForm: false,
      formData: {
        name: '',
        age: 0,
        species: null
      }
    }
  },
  computed: {
    ...mapGetters([
      'animalsCount',
      'getAllCats',
      'getAllDogs'
    ])
  },
  methods: {
    ...mapActions([
      'addPet'
    ]),
    togglePetForm () {
      this.showPetForm = !this.showPetForm
    },
    handleSubmit () {
      const { species, age, name } = this.formData
      const payload = {
        species,
        pet: {
          name,
          age
        }
      }
      this.addPet(payload)

      // reset from after submit
      this.formData = {
        name: '',
        age: 0,
        species: null
      }
    }
  }
}
</script>
